<template>
  <!--  <div style="height:100%" :class="[{'main-app':$route.name != 'home'}]">-->
  <div :class="[{'main-app':$route.name != 'home', 'main-dashboard': $route.name == 'dashboard' ,'main-knowledge': $route.name == 'myShare' || $route.name == 'knowledgSharing' || $route.name == 'uploadShare' || $route.name == 'uploadShareDetail'}]">
    <!--    <el-scrollbar  style="height:100%">-->
    <transition :name="transitionName" mode="out-in">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive" class="child-view"></router-view>
      </keep-alive>
    </transition>
    <transition :name="transitionName" mode="out-in">
      <router-view v-if="!$route.meta.keepAlive" class="child-view"></router-view>
    </transition>
    <!--    </el-scrollbar>-->
  </div>
</template>

<script>
export default {
  name: "app-main",
  data() {
    return {
      desc: "这里是右侧主界面",
      transitionName: "slide-left",
    };
  },
};
</script>

<style lang="scss" scoped>
.main-app {
  box-shadow: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  padding: 10px 20px;
  background: #fff;
  flex: 1;
  // min-height: 100%;
  // overflow: auto;
  box-sizing: border-box;
  // margin: 15px;
}
.main-dashboard {
  margin: 0;
  padding: 0;
  border: 0 solid #fff;
}
.main-knowledge {
  padding: 0;
  margin: 0;
  box-shadow: none;
}
.child-view {
  width: 100%;
  transition: all 0.2s cubic-bezier(0.55, 0, 0.1, 1);
}
.slide-left-enter,
.slide-right-leave-active {
  opacity: 0;
  //  -webkit-transform: translate(50px, 0);
  //  transform: translate(50px, 0);
}
.slide-left-leave-active,
.slide-right-enter {
  opacity: 0;
  //  -webkit-transform: translate(-50px, 0);
  //  transform: translate(-50px, 0);
}
</style>
<style lang="scss">
</style>
